import React from 'react'
import {Row, Col, Menu, Dropdown, DatePicker, Input,Button ,Table,} from 'antd';

import {DownOutlined,QuestionCircleOutlined} from '@ant-design/icons';
import './OutOfStockRecord.css'

const {Search} = Input;
const {RangePicker} = DatePicker;
const menu = (
    <Menu>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                1st menu item
            </a>
        </Menu.Item>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                2nd menu item
            </a>
        </Menu.Item>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
                3rd menu item
            </a>
        </Menu.Item>
    </Menu>
);

function onChange(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
}

function onOk(value) {
    console.log('onOk: ', value);
}
const columns = [
    {
        title: '编号',
        dataIndex: 'orderNo',
    },

    {
        title: '客户名称',
        dataIndex: 'customerName',
        sorter: (a, b) => a.age - b.age,

    },
    {
        title: <span>物流单状态 <QuestionCircleOutlined/></span>     ,
        dataIndex: 'LogisticsListState',
    },
    {
        title: '关联订单',
        dataIndex: 'relationOrder',
    },
    {
        title: '出库时间',
        dataIndex: 'outTime',
    },
    {
        title: '发货时间',
        dataIndex: 'sendGoodsTime',
    },
    {
        title: '操作',
        key: 'action',
        render: () => (
            <span>
        <span style={{ marginRight: 16 }}>. . .</span>

      </span>
        ),
    },
];
const tableData=[
    {
        key:0,
        orderNo:'DH-O-20200404-2643',
        orderTime:'2020-04-02 11:33',
        customerName:'欧尚超市',
        LogisticsListState:'无',
        relationOrder:'DH-O-20200404-2643',
        outTime:'2020-04-03 11:33',
        sendGoodsTime:'2020-04-03 15:33',
    },
    {
        key:1,
        orderNo:'DH-O-20200404-2643',
        orderTime:'2020-04-02 11:33',
        customerName:'欧尚超市',
        LogisticsListState:'无',
        relationOrder:'DH-O-20200404-2643',
        outTime:'2020-04-03 11:33',
        sendGoodsTime:'2020-04-03 15:33',
    },
    {
        key:2,
        orderNo:'DH-O-20200404-2643',
        orderTime:'2020-04-02 11:33',
        customerName:'欧尚超市',
        LogisticsListState:'无',
        relationOrder:'DH-O-20200404-2643',
        outTime:'2020-04-03 11:33',
        sendGoodsTime:'2020-04-03 15:33',
    },
    {
        key:3,
        orderNo:'DH-O-20200404-2643',
        orderTime:'2020-04-02 11:33',
        customerName:'欧尚超市',
        LogisticsListState:'无',
        relationOrder:'DH-O-20200404-2643',
        outTime:'2020-04-03 11:33',
        sendGoodsTime:'2020-04-03 15:33',
    },
    {
        key:4,
        orderNo:'DH-O-20200404-2643',
        orderTime:'2020-04-02 11:33',
        customerName:'欧尚超市',
        LogisticsListState:'无',
        relationOrder:'DH-O-20200404-2643',
        outTime:'2020-04-03 11:33',
        sendGoodsTime:'2020-04-03 15:33',
    },
    {
        key:5,
        orderNo:'DH-O-20200404-2643',
        orderTime:'2020-04-02 11:33',
        customerName:'欧尚超市',
        LogisticsListState:'无',
        relationOrder:'DH-O-20200404-2643',
        outTime:'2020-04-03 11:33',
        sendGoodsTime:'2020-04-03 15:33',
    },
    {
        key:6,
        orderNo:'DH-O-20200404-2643',
        orderTime:'2020-04-02 11:33',
        customerName:'欧尚超市',
        LogisticsListState:'无',
        relationOrder:'DH-O-20200404-2643',
        outTime:'2020-04-03 11:33',
        sendGoodsTime:'2020-04-03 15:33',
    },

];
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
    }),
};
const data = [];
for (let i = 1; i <= 10; i++) {
    data.push({
        key: i,
        name: 'John Brown',
        age: `${i}2`,
        address: `New York No. ${i} Lake Park`,
        description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
    });
}

class OutOfStockRecord extends React.Component {
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    render() {

        const { xScroll, yScroll, ...state } = this.state;

        const scroll = {};
        if (yScroll) {
            scroll.y = 240;
        }
        if (xScroll) {
            scroll.x = '100vw';
        }

        const tableColumns = columns.map(item => ({ ...item, ellipsis: state.ellipsis }));
        if (xScroll === 'fixed') {
            tableColumns[0].fixed = true;
            tableColumns[tableColumns.length - 1].fixed = 'right';
        }
        return (
            <div style={{padding: 10}}>
                <Row align='middle'>
                    <Col span={2}>
                        <Dropdown overlay={menu}>
                            <a className="dropdownItem" href={'true'} onClick={e => e.preventDefault()}>
                                出库时间 <DownOutlined/>
                            </a>
                        </Dropdown>
                    </Col>
                    <Col span={2}>
                        <Dropdown overlay={menu}>
                            <a className="dropdownItem" href={'true'} onClick={e => e.preventDefault()}>
                                全部物流 <DownOutlined/>
                            </a>
                        </Dropdown>
                    </Col>
                    <Col span={6}>
                        <RangePicker
                            showTime={{format: 'HH:mm'}}
                            format="YYYY-MM-DD HH:mm"
                            onChange={onChange}
                            placeholder={['起始时间', '结束时间']}
                            onOk={onOk}
                        />
                    </Col>
                    <Col span={6} style={{paddingLeft: 10}}>
                        <Search placeholder="请输入出库/发货/订单号/客户名称" onSearch={value => console.log(value)}/>
                    </Col>
                    <Col span={6} offset={2} align='right'>
                        <Button style={{marginLeft:20,borderRadius:4}}>物流单导入</Button>
                    </Col>

                </Row>
                <Row style={{marginTop:10}}>
                    <Table
                        {...this.state}
                        rowSelection={{
                            ...rowSelection,
                        }}
                        pagination={{ position: ['none', 'bottomRight'],pageSize:5}}
                        columns={columns}
                        dataSource={tableData}
                        scroll={scroll}
                        className='table'
                    />
                </Row>
            </div>

        )

    }
}

export default OutOfStockRecord